<template>
  <div class="detail-shop-info" v-if="Object.keys(detailShopInfoObject).length">
    <div class="shopLog">
      <img :src="detailShopInfoObject.shopLogo" alt="" @load="imgLoad">
      <span>{{ detailShopInfoObject.shopName }}</span>
    </div>
    <div class="shopInfo">
      <div class="sellsAndGoods">
        <div>
          <p>{{ detailShopInfoObject.cSells | sellCountFilter }}</p>
          <p>总销量</p>
        </div>
        <div>
          <p>{{ detailShopInfoObject.cGoods }}</p>
          <p>全部宝贝</p>
        </div>
      </div>
      <div class="score">
        <table class="right">
          <tr v-for="(item,index) in detailShopInfoObject.score" :key="index">
            <td>{{ item.name }}</td>
            <td class="normal" :class="{'better': item.isBetter}">{{ item.score }}</td>
            <td class="normal" :class="{'better': item.isBetter}"><span>{{ item.isBetter ? '高' : '低' }}</span></td>
          </tr>
        </table>
      </div>
    </div>
    <div class="buttonDiv">
      <button>进店逛逛</button>
    </div>
  </div>
</template>

<script>

export default {
  name: "DetailShopInfo",
  props: {
    detailShopInfoObject: {
      type: Object,
      default() {
        return {};
      }
    },
  },
  methods: {
    imgLoad() {
      this.$bus.$emit("imgLoad");
    }
  },
  filters: {
    sellCountFilter: function (value) {
      if (value < 10000) return value;
      return (value / 10000).toFixed(2) + "万";
    }
  }
}
</script>

<style scoped>
.detail-shop-info {
  padding: 25px 10px;
  border-bottom: 5px solid #f2f5f8;
}

.shopLog {
  display: flex;
  align-items: center;
}

.shopLog img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 1px solid #eee;
  margin-right: 10px;
}

.shopInfo {
  display: flex;
  align-items: center;
}

.shopInfo > div {
  flex: 1;
}

.sellsAndGoods {
  display: flex;
  justify-content: space-evenly;
  text-align: center;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.sellsAndGoods div p:first-child {
  font-size: 18px;
  color: #000;
}

.sellsAndGoods div p:last-child {
  font-size: 12px;
  margin-top: 8px;
}

.score table {
  width: 130px;
  font-size: var(--font-size);
  color: #000;
}

.score table tr td {
  padding: 5px 0;
}

.score table .normal {
  color: #5ea732;
}

.score table .better {
  color: #f13e3a;
}

.score table .normal span {
  padding: 2px;
  border-radius: 3px;
  background-color: #5ea732;
}

.score table .better span {
  padding: 2px;
  border-radius: 3px;
  background-color: #f13e3a;
}

.score table tr td:last-child {
  color: #fff;
}

.detail-shop-info .buttonDiv {
  width: 100%;
}

.detail-shop-info .buttonDiv button {
  width: 100px;
  display: block;
  margin: 10px auto 0;
  padding: 7px 2px;
  border-radius: 10px;
  background-color: #f2f5f8;
  border: none;
  font-size: var(--font-size);
}
</style>